<template>
  <div class="operateItem">
    <div class="btn" v-for="item in operated" :key="item.name">
      <el-button
        size="medium"
        type="primary"
        :icon="item.icon"
        @click="clickbtn(item.name)"
        >{{ item.name }}</el-button
      >
    </div>
    <div class="iconfont big icon-tubiaozhizuomoban-31"></div>
    <el-dialog title="日记面板" width="30%" :visible.sync="dialogTableVisible" append-to-body :modal-append-to-body='false'>
        <DiaryHeaderVue :methon="offDialog"></DiaryHeaderVue>
    </el-dialog>   
  </div>
</template>

<script>
import DiaryHeaderVue from './DiaryHeader.vue';

export default {
  components: {DiaryHeaderVue},
  props: ["operated"],
  data() {
    return {
        dialogTableVisible:false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    clickbtn(data) {
      switch (data) {
        case "写日记":
            this.dialogTableVisible=true;
          break;
        case "改日记":
         this.$store.commit('GETACTIVEDIARYSOMECONTENT');
          break;
        case "删日记":
          this.$store.commit('DELETEDIARY');
          this.$message({
          message: '恭喜你，成功删除一条日记',
          type: 'success'
        });
          break;
      }
    },
    offDialog() {
        this.dialogTableVisible=false;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang='css' scoped>
.btn {
  margin: 20px 23px;
}
.big {
  font-size: 200px;
  position: absolute;
  bottom: -10px;
  left: -50px;
}
</style>